<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.config.appInfo.logo" mode="widthFix">
			</image>
			<text class="title">若依移动端注册</text>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="registerObj.registerForm.username" class="input" type="text" placeholder="请输入账号"
					maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="registerObj.registerForm.password" type="password" class="input" placeholder="请输入密码"
					maxlength="20" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="registerObj.registerForm.confirmPassword" type="password" class="input"
					placeholder="请输入重复密码" maxlength="20" />
			</view>
			<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="registerObj.captchaEnabled">
				<view class="iconfont icon-code icon"></view>
				<input v-model="registerObj.registerForm.code" type="number" class="input" placeholder="请输入验证码"
					maxlength="4" />
				<view class="login-code">
					<image :src="registerObj.codeUrl" @click="getCode" class="login-code-img"></image>
				</view>
			</view>
			<view class="action-btn">
				<button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
			</view>
		</view>
		<view class="xieyi text-center">
			<text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
		</view>
	</view>
</template>

<script setup>
	import {ref, reactive, onMounted , inject, getCurrentInstance} from 'vue';
	import { getCodeImg, register } from '@/api/login'

	// 获取全局配置
	const { appContext } = getCurrentInstance();
	const $tab = appContext.config.globalProperties.$tab;
	const $modal = appContext.config.globalProperties.$modal;

	const globalConfig = inject('globalData')
	const registerObj = reactive({
		codeUrl: "",
		captchaEnabled: true,
		registerForm: {
			username: "",
			password: "",
			confirmPassword: "",
			code: "",
			uuid: ''
		}
	});

	// 用户登录
	const handleUserLogin = () => {
		$tab.navigateTo(`/pages/login/login`)
	};

	// 获取图形验证码
	const getCode = () => {
		getCodeImg({grantType: 'uuid'}).then(res => {
			captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
			if (captchaEnabled) {
				codeUrl = 'data:image/gif;base64,' + res.img
				registerForm.uuid = res.uuid
			}
		})
	};

	// 注册方法
	const handleRegister = async () => {
		if (registerObj.registerForm.username === "") {
			$modal.msgError("请输入您的账号")
		} else if (registerObj.registerForm.password === "") {
			$modal.msgError("请输入您的密码")
		} else if (registerObj.registerForm.confirmPassword === "") {
			$modal.msgError("请再次输入您的密码")
		} else if (registerObj.registerForm.password !== registerObj.registerForm.confirmPassword) {
			$modal.msgError("两次输入的密码不一致")
		} else if (registerObj.registerForm.code === "" && registerObj.captchaEnabled) {
			$modal.msgError("请输入验证码")
		} else {
			$modal.loading("注册中，请耐心等待...")
			toRegister()
		}
	};

	// 用户注册
	const toRegister = async () => {
		register(registerForm).then(res => {
			$modal.closeLoading()
			uni.showModal({
				title: "系统提示",
				content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！",
				success: function(res) {
					if (res.confirm) {
						uni.redirectTo({
							url: `/pages/login`
						});
					}
				}
			})
		}).catch(() => {
			if (captchaEnabled) {
				getCode()
			}
		})
	};

	// 注册成功后，处理函数
	const registerSuccess = (result) => {
		// 设置用户信息
		$store.dispatch('GetInfo').then(res => {
			$tab.reLaunch('/pages/index/index')
		})
	}
</script>

<style lang="scss">
	@import url("register.scss");
</style>